<template>
	<a-row class="mt-2" :gutter="12">
		<a-col :span="12">
			<a-card :bordered="false" title="新增会员性别分析">
				<div id="BasicBar1"></div>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false" title="各店今日新增会员">
				<div id="BasicBar2"></div>
			</a-card>
		</a-col>
	</a-row>

	<a-card :bordered="false" title="基础信息">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:scroll="{ x: 'calc(640px + 50%)', y: 1000 }"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'storeCode'">
					{{ dataTool.getOrg(record.storeCode) }}
				</template>
			</template>
		</s-table>
	</a-card>
</template>

<script setup name="vipReport">
	import { Column, Bar, Area } from '@antv/g2plot'
	import biApi from '@/api/bi/biApi'
	import dayjs from 'dayjs'
	import dataTool from '@/api/sys/dataTool'
	import { Pie, G2 } from '@antv/g2plot'
	import { onMounted } from 'vue'

	let barPlot1
	let barPlot2

	let searchFormState = reactive({
		startTimeCreated: dayjs(new Date()).subtract(1, 'day'),
		endTimeCreated: dayjs(new Date()).subtract(1, 'day')
	})

	const G = G2.getEngine('canvas')

	onMounted(() => {
		const sexItem = {
			0: '#1890ff',
			1: '#f04864',
			2: '#045464'
		}
		const sexName = {
			0: '男',
			1: '女',
			2: '未知'
		}
		const imgItem = {
			0: 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png',
			1: 'https://gw.alipayobjects.com/zos/rmsportal/mweUsJpBWucJRixSfWVP.png',
			2: ''
		}
		barPlot1 = new Pie('BasicBar1', {
			appendPadding: 10,
			data: [],
			angleField: 'count',
			colorField: 'sex',
			radius: 0.66,
			color: ['#1890ff', '#f04864', '#045464'],
			label: {
				content: (obj) => {
					const group = new G.Group({})
					group.addShape({
						type: 'image',
						attrs: {
							x: 0,
							y: 0,
							width: 40,
							height: 50,
							img: imgItem[obj.sex]
						}
					})

					group.addShape({
						type: 'text',
						attrs: {
							x: 40,
							y: 54,
							text: sexName[obj.sex],
							textAlign: 'center',
							textBaseline: 'top',
							fill: sexItem[obj.sex]
						}
					})
					return group
				}
			},
			interactions: [{ type: 'element-active' }]
		})
		barPlot2 = new Bar('BasicBar2', {
			data: [],
			xField: 'count',
			yField: 'storeCode',
			seriesField: 'createTime',
			legend: {
				position: 'top-left'
			},
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle' // 'top', 'bottom', 'middle'
			}
		})
		barPlot1.render()
		barPlot2.render()
	})
	const table = ref(null)
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: true }
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const columns = [
		{
			title: '门店编码',
			dataIndex: 'storeCode',
			align: 'center',
			width: 50
		},
		{
			title: '注册时间',
			dataIndex: 'createTime',
			align: 'center',
			width: 50
		},
		{
			title: '会员数',
			dataIndex: 'allVip',
			align: 'center',
			width: 50
		},
		{
			title: '会员数(男)',
			dataIndex: 'manVip',
			align: 'center',
			width: 50
		},
		{
			title: '会员数(女)',
			dataIndex: 'womanVip',
			align: 'center',
			width: 50
		},
		{
			title: '会员数(未知)',
			dataIndex: 'unVip',
			align: 'center',
			width: 50
		}
	]
	let selectedRowKeys = ref([])
	// 列表数据
	const loadData = (parameter) => {
		const params = Object.assign(parameter, searchFormState)
		if (params.startTimeCreated) {
			params.startTimeCreated = params.startTimeCreated.format('YYYY-MM-DD')
		}
		if (params.endTimeCreated) {
			params.endTimeCreated = params.endTimeCreated.format('YYYY-MM-DD')
		}
		console.log(searchFormState)
		return biApi.pageRegisterDay(params).then((res) => {
			barPlot1.changeData(res.sexList)
			barPlot2.changeData(res.siginList)
			return res.crmList
		})
	}
</script>

<style lang="less" scoped>
	::v-deep .ant-table .ant-table-fixed-left {
		height: auto !important;
		bottom: 15px !important;
		&::before {
			background-color: #fff;
		}
	}
</style>
